<template>
  <div class="season">
    <div class="newText">时令蔬菜</div>
    <div class="all">全部</div>
    <div class="seaBox">
      <div v-for="(item, index) in name" class="sebox">
        <router-link :to="{path:'/zzt',query:{id:id[index]}}" class="tiaozhuan"></router-link>
        <img :src="touxiang[index]" alt="" />
        <div class="text">{{ item }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: [],
      touxiang: [],
      id: [],
    };
  },
  async mounted() {
    var name = [];
    var touxiang = [];
    var id = [];
    this.$axios("/zztz/season").then((res) => {
      res.data.map((el) => {
        touxiang.push(el.touxiang);
        name.push(el.name);
        id.push(el.id);
      });
      this.name = name;
      this.touxiang = touxiang;
      this.id = id;
    });
  },
  methods: {
    //   tiaozhuan(){
    //       this.$router.push({path:"/zzt",query:{id:id}})
    //   }
  },
};
</script>

<style scoped="scoped">
.season {
  /* width: 490px; */
  /* height: 270px; */
  position: absolute;
  left: 157px;
  top: 2131px;
  overflow: hidden;
  /* background-color: palegreen; */
}
.newText {
  font-size: 20px;
  font-weight: 700;
  color: #c0ae7d;
}
.all {
  color: #dd3915;
  position: absolute;
  left: 112px;
  top: 6px;
  cursor: pointer;
}
.all:hover {
  background-color: #dd3915;
  color: white;
}
.seaBox {
  width: 475px;
  height: 230px;
  background-color: rgb(245, 246, 245);
  margin-top: 22px;
  /* padding: 15px 15px 7px; */
  padding-left: 15px;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.sebox {
  width: 70px;
  height: 96px;
  margin: 0 4px;
  cursor: pointer;
  /* background-color: royalblue; */
}
.sebox:hover {
  color: orangered;
  opacity: 0.8;
}
.text {
  width: 60px;
  text-align: center;
  font-size: 12px;
  line-height: 35px;
}
.tiaozhuan {
  display: inline-block;
  position: absolute;
  width: 70px;
  height: 96px;
}
</style>